<template>
  <div style="width:100%;height:100%;">
    <el-form style="min-height: 60px;width: 98%;display: grid;grid-template-columns: 1fr 1fr 1fr;" label-width="80px" label-suffix=":">
        <el-form-item style="min-height:40px;" label="姓名">
            <el-input placeholder="请输入内容" v-model="elInput196.value">
                <el-button slot="append" icon="el-icon-close" size="mini"></el-button>
            </el-input>
        </el-form-item>
        <el-form-item style="min-height:40px;" label="性别">
            <el-radio-group style="min-height:28px;padding-top: 12px;width:100%;display:flex;flex-flow:row wrap;justify-content:flex-start;" v-model="elRadioGroup198.value">
                <el-radio label="m">
                    男
                </el-radio>
                <el-radio label="f">
                    女
                </el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item style="min-height:40px;" label="年龄">
            <el-input-number style="width:100%;" :min="1" :max="10" label="" v-model="elInputNumber202.value">
            </el-input-number>
        </el-form-item>
        <el-form-item style="min-height:40px;grid-column: 1/3;" label="工作时间">
            <el-date-picker style="width:100%;" type="daterange" placeholder="选择日期" v-model="elDatePicker204.value">
            </el-date-picker>
        </el-form-item>
        <el-form-item style="min-height:40px;" label="籍贯">
            <el-cascader style="width:100%;" :options="elCascader206.options" placeholder="级联选择" :popperOptions="elCascader206.popperOptions">
            </el-cascader>
        </el-form-item>
        <el-form-item style="min-height:40px;" label="亲和力">
            <el-slider v-model="elSlider208.value">
            </el-slider>
        </el-form-item>
        <el-form-item style="min-height:40px;" label="颜色">
            <el-color-picker v-model="elColorPicker210.value">
            </el-color-picker>
        </el-form-item>
    </el-form>
    <el-table style="width:100%;" stripe border :data="elTable188.data">
        <el-table-column prop="select" label="选择" width="50" type="selection">
        </el-table-column>
        <el-table-column prop="date" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180" sortable="true">
        </el-table-column>
        <el-table-column prop="address" label="地址">
        </el-table-column>
        <el-table-column prop="process" label="操作" width="100">
            <template slot-scope="scope">
                <el-button type="primary" size="mini">操作</el-button>
              </template>
        </el-table-column>
    </el-table>
  </div>
</template>
<script>
const childrenProps = {};

export default {
    component : {
    },
    data(){
        return {
            //data定义,
            elInput196 : {"value":""},
    elRadioGroup198 : {"value":"m"},
    elInputNumber202 : {"value":1},
    elDatePicker204 : {"value":[new Date(1652716800000),new Date(1655740800000),]},
    elCascader206 : childrenProps.elCascader206(),
    elSlider208 : {"value":36},
    elColorPicker210 : {"value":"#409EFF"},
    elTable188 : childrenProps.elTable188(),
        };
    },
}

childrenProps.elCascader206 = function(){
    return {
        "options":[{
                "value":"zhinan",
                "label":"指南",
                "children":[{
                        "value":"shejiyuanze",
                        "label":"设计原则",
                        "children":[{
                                "value":"yizhi",
                                "label":"一致",
                            },{
                                "value":"fankui",
                                "label":"反馈",
                            },{
                                "value":"xiaolv",
                                "label":"效率",
                            },{
                                "value":"kekong",
                                "label":"可控",
                            },],
                    },{
                        "value":"daohang",
                        "label":"导航",
                        "children":[{
                                "value":"cexiangdaohang",
                                "label":"侧向导航",
                            },{
                                "value":"dingbudaohang",
                                "label":"顶部导航",
                            },],
                    },],
            },{
                "value":"zujian",
                "label":"组件",
                "children":[{
                        "value":"basic",
                        "label":"Basic",
                        "children":[{
                                "value":"layout",
                                "label":"Layout 布局",
                            },{
                                "value":"color",
                                "label":"Color 色彩",
                            },{
                                "value":"typography",
                                "label":"Typography 字体",
                            },{
                                "value":"icon",
                                "label":"Icon 图标",
                            },{
                                "value":"button",
                                "label":"Button 按钮",
                            },],
                    },{
                        "value":"form",
                        "label":"Form",
                        "children":[{
                                "value":"radio",
                                "label":"Radio 单选框",
                            },{
                                "value":"checkbox",
                                "label":"Checkbox 多选框",
                            },{
                                "value":"input",
                                "label":"Input 输入框",
                            },{
                                "value":"input-number",
                                "label":"InputNumber 计数器",
                            },{
                                "value":"select",
                                "label":"Select 选择器",
                            },{
                                "value":"cascader",
                                "label":"Cascader 级联选择器",
                            },{
                                "value":"switch",
                                "label":"Switch 开关",
                            },{
                                "value":"slider",
                                "label":"Slider 滑块",
                            },{
                                "value":"time-picker",
                                "label":"TimePicker 时间选择器",
                            },{
                                "value":"date-picker",
                                "label":"DatePicker 日期选择器",
                            },{
                                "value":"datetime-picker",
                                "label":"DateTimePicker 日期时间选择器",
                            },{
                                "value":"upload",
                                "label":"Upload 上传",
                            },{
                                "value":"rate",
                                "label":"Rate 评分",
                            },{
                                "value":"form",
                                "label":"Form 表单",
                            },],
                    },{
                        "value":"data",
                        "label":"Data",
                        "children":[{
                                "value":"table",
                                "label":"Table 表格",
                            },{
                                "value":"tag",
                                "label":"Tag 标签",
                            },{
                                "value":"progress",
                                "label":"Progress 进度条",
                            },{
                                "value":"tree",
                                "label":"Tree 树形控件",
                            },{
                                "value":"pagination",
                                "label":"Pagination 分页",
                            },{
                                "value":"badge",
                                "label":"Badge 标记",
                            },],
                    },{
                        "value":"notice",
                        "label":"Notice",
                        "children":[{
                                "value":"alert",
                                "label":"Alert 警告",
                            },{
                                "value":"loading",
                                "label":"Loading 加载",
                            },{
                                "value":"message",
                                "label":"Message 消息提示",
                            },{
                                "value":"message-box",
                                "label":"MessageBox 弹框",
                            },{
                                "value":"notification",
                                "label":"Notification 通知",
                            },],
                    },{
                        "value":"navigation",
                        "label":"Navigation",
                        "children":[{
                                "value":"menu",
                                "label":"NavMenu 导航菜单",
                            },{
                                "value":"tabs",
                                "label":"Tabs 标签页",
                            },{
                                "value":"breadcrumb",
                                "label":"Breadcrumb 面包屑",
                            },{
                                "value":"dropdown",
                                "label":"Dropdown 下拉菜单",
                            },{
                                "value":"steps",
                                "label":"Steps 步骤条",
                            },],
                    },{
                        "value":"others",
                        "label":"Others",
                        "children":[{
                                "value":"dialog",
                                "label":"Dialog 对话框",
                            },{
                                "value":"tooltip",
                                "label":"Tooltip 文字提示",
                            },{
                                "value":"popover",
                                "label":"Popover 弹出框",
                            },{
                                "value":"card",
                                "label":"Card 卡片",
                            },{
                                "value":"carousel",
                                "label":"Carousel 走马灯",
                            },{
                                "value":"collapse",
                                "label":"Collapse 折叠面板",
                            },],
                    },],
            },{
                "value":"ziyuan",
                "label":"资源",
                "children":[{
                        "value":"axure",
                        "label":"Axure Components",
                    },{
                        "value":"sketch",
                        "label":"Sketch Templates",
                    },{
                        "value":"jiaohu",
                        "label":"组件交互文档",
                    },],
            },],
        "popperOptions":{
            "placement":"bottom-start",
            "offset":0,
            "arrowOffset":35,
        },
    }
};


childrenProps.elTable188 = function(){
    return {
        "data":[{
                "date":"2016-05-02",
                "name":"王小虎",
                "address":"上海市普陀区金沙江路 1518 弄",
            },{
                "date":"2017-05-04",
                "name":"王大虎",
                "address":"上海市普陀区金沙江路 1517 弄",
            },{
                "date":"2015-05-01",
                "name":"王中虎",
                "address":"上海市普陀区金沙江路 1519 弄",
            },{
                "date":"2018-05-03",
                "name":"王老虎",
                "address":"上海市普陀区金沙江路 1516 弄",
            },],
    }
};

</script>
<style type="css" scoped>
</style>